//公共
.p20{
    clear: both;
    height: 20px;
    width: 100%;
}
.p40{
    clear: both;
    height: 40px;
    width: 100%;
}
.w1{width: 100%;height: 1px;background: red;clear: both;}
.h1{height: 100%;width: 1px;background: #dfdfdf;float: left;}
//顶部区域
#top{
    .li{
        float: left;
        padding: 0 10px;
        background: transparent url("../images/bg65.png") no-repeat right; 
    }
    .left{
        .l1{
            padding-left: 0;
        }
        li{
           .li;
        }
        
    }
    .right{
        position: relative;
        s{
            text-decoration: none;
            width: 7px;
            height: 4px;
            display: block;
            position: absolute;
            background: url(../images/sprites3.png) no-repeat -34px 0px;
            top: 14px;
            right: 10px;
        }
        .l1{
            a{
               color: #322F2B; 
               &:hover{
                   color: #ca141d;
               }
            }
            padding-left: 0;
            
        }
        .l5{
            background: none;
            padding-right: 25px;
        }
        li{
            .li;
        }
       
    }
    a{
        color: #8C8C8C;
        &:hover{
           color:#ca141d;
        }
    }
    background: #fafafa;
    height: 30px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 30px;
}
//广告区域
#tpad{
    margin-top: 10px;
    height: 80px;
    a{
        width: 1200px;
        height: 80px;
    }
}
//头部区域
#header{
    height: 86px;
    padding-top: 43px;
    position: relative;
    .logo{
        width: 345px;
    }
    .seach{
        form{
            width: 428px;
            height: 28px;
            border: 2px solid #ca141d;
            .btn{
                float: right;
                width: 64px;
                height: 28px;
                background: #ca141d;
                color: #fff;
                font-size: 14px;
                cursor: pointer;
                &:hover{
                    background: #d5434a;
                }
            }
            .text{
                float: left;
                width: 344px;
                height: 28px;
                padding: 0 10px;
            }
        }
        ul{
            width: 430px;
            height: 20px;
            .l1{padding-left: 0px;color: #999;}
            li{
                line-height: 20px;
                float: left;
                padding: 0 8px;
                
                a{
                    color: #999;
                    &:hover{
                        color: #ca141d;
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .car{
        margin-left: ;
        .car_box{
            
            width: 93px;height:30px;
            position: relative;
            a{line-height: 30px;color: #333; &:hover{color: #ca141d;text-decoration: underline;}}
            .a1{padding-left: 20px;}
            .a2{padding-left: 10px;border-left: 1px solid #CCC;}
            s{
               display: block;
                width: 8px;
                height: 4px;
                background: url(../images/icon1.png)no-repeat 0 -96px;
                position: absolute;top:15px;right: 8px; 
            }
        }
        float: left;
        width: 196px;
        height: 30px;
        border: 1px solid #e5e5e5;  
    }
    .QR_code{
        position: absolute;top: 20px;right: 0;
        width: 90px;
        height: 95px;
        img{width: 76px;height: 76px;}
    }
    
}
//nav
#nav{
    
    height: 40px;
    width:100%;
    background: #ca141d;
    position: relative;
    .comWidth{
        .left_nav{
            position: absolute;
            top:0px;
            width: 220px;
            overflow: hidden;   
            
            h2{
                font-weight: normal;
                font-size: 16px;
                text-align: center;
                color: #fff;
                line-height: 40px;

                background: #e63547;
              
            }
            .midlle{
                background: #e63547;
                border: 1px solid #f86675;
                width: 218px;  
                dl{
                    position: relative;
                    width: 218px;
                    height: 57px;
                    dt{
                        padding: 5px 0 5px 10px;
                        font-size: 16px;
                        a{color: #fff;}
                    }
                    dd{
                        float: left;
                        font-size: 13px;
                        padding-left: 10px;
                        a{color: #FFB7BA;}
                    }
                 }
            }
            
        }
    }
    ul{
        padding-left: 220px;
        .active{background: #ba181f;}
        li{
            a{
                font-size: 16px;
                color: #fff;
                display:inline-block;
                line-height: 40px;
                padding: 0 30px;
                text-align: center;
            }
            float: left;
          
             &:hover{
                    background: #d9141e;
                }
        }
    }
}
//焦点图
#foucs{
    background: #f6f6f6;
    ul{
        height: 400px;
    }
    height: 400px;
}
//热卖区域
#hot{
    height: 640px;
    .wh{
        height: 320px;
        width: 1200px;
        }
    .hot_right{
        width: 276px;
        height: 320px;
       }
    .hot_box{
        width: 450px;
        height: 320px;
        background: #f8f8f8;
        position: relative;
        border: 1px solid #dfdfdf;
        img{position: absolute;top: 27px;left: 40px;}
        .biaoti{color: #333;font-size: 26px;position: absolute;top:71px;left: 215px;}
        .s1{position: absolute;top:120px;left: 215px;color: #777;font-size: 15px;}
        .s2{position: absolute;top:140px;left: 215px; color: #E01D20;font-size: 15px;}
        .price{position: absolute;top:204px;left: 215px;font-size: 24px;color: #E01D20;}
        .buy{position: absolute;top:198px;left: 300px;display: inline-block;width: 78px;height: 30px;font-size: 14px;border: 1px solid #b3131a;background: #d81b24;&:hover{background: #f0333c;}border-radius: 4px;color: #fff;text-align: center;line-height: 30px;}
       }
    .up{
        .wh;
        .hot_box{
            .hot_box;
            
        }
        .hot_right{
            .hot_right;
            img{width: 100%;height: 100%;}
        }
    }
    .down{
        .wh;
        .hot_box{
           .hot_box;
        }
        .hot_right{
            .hot_right;
        }
        .msg{
            border: 1px solid #dfdfdf;margin-bottom:28px;
            .msg_bar{
                .active{
                    background: #fcf7f7;
                    color: #9C9590;
                }
                a{display: inline-block;height: 30px;width: 135px;text-align: center;line-height: 30px;color: #333;font-size: 14px;&:hover{color: #ba181f;text-decoration: underline;}}
            }
            ul{
                padding:10px 0px;
                li{ a{line-height: 22px;color: #9C9590;padding-left: 15px;&:hover{color: #ba181f;text-decoration: underline;}}}
                
                
            }
        }
        .shiming{width: 278px;height: 132px;margin-top: 30px;img{display: block;width: 278px;height: 132px;}}
        
    }
}
//ad
#ad{
    height: 160px;
}
//主题内容通用模块样式
.title{
    height: 30px;
    width: 100%;
    h3{
        border-left: 3px solid #C82C2C;
        height: 30px;
        padding-left:10px ;
        line-height: 30px;
        a{color: #000;font-size: 18px;font-weight: bold;margin-right: 5px;&:hover{color: #ba181f;}}
        span{color: #978679;font-weight: normal;}
        
    }
    ul{
        line-height: 30px;
        li{
            float: left;
            padding-left: 20px;
            a{color: #978679;&:hover{color: #ba181f;}}
        }
    }
}
.content(@h:643px){
    height: @h;
    width: 1199px;
    padding: 1px;
    background: #DFDFDF;
    ul{
        width: 1201px;
        overflow: hidden;
    .l1{
        margin: 0 1px 1px 0;
        float: left;
        height: 321px;width: 599px;background: #f6f6f6;
        position: relative;
        img{ position: absolute;top: 50px;left: 35px;width: 222px;height: 222px;}
        .biaoti{color: #333;font-size: 26px;position: absolute;top:64px;left: 305px;}
        .s1{position: absolute;top:108px;left: 305px;color: #777;font-size: 15px;}
        .s2{position: absolute;top:138px;left: 305px; color: #E01D20;font-size: 15px;}
        .price{position: absolute;top:210px;left: 305px;font-size: 24px;color: #E01D20;}
        .buy{position: absolute;top:208px;left: 392px;display: inline-block;width: 78px;height: 30px;font-size: 14px;border: 1px solid #b3131a;background: #d81b24;border-radius: 4px;color: #fff;text-align: center;line-height: 30px;
        &:hover{background: #f0333c;}
            }
   }}
   li{
//     background: #ffffff;
       margin: 0 1px 1px 0;
       float: left;
       width: 299px;
       height: 321px;
      
       position: relative;
       .price{position: absolute;left: 122px;top: 280px;color: #E01D20;font-size: 20px;}
       img{position: absolute;width: 222px;height: 222px;left: 40px;top:10px;}
       .c_name{position: absolute;left: 46px;top: 235px;color: #333;font-size:14px;&:hover{color: #E01D20;text-decoration: underline;}span{color: #E01D20;}}
       
       
       
   }
}
//手机
#phone{
    .title{
        .title;
    }
    .content{
        .content(965px);
    }
    height: 1000px;

}
//平板
#tablet{
    .title{
        .title;
    }
    .content{
        .content;
    }
    height: 676px;
}
//智能家居
#smart_home{
    .title{
        .title;
    }
    .content{
        .content;
    }
    height: 676px;
}
//必备配件
#accessories{
    .title{
        .title;
    }
    .content{
        .content(1609px);
    }
    height: 1640px;

}
//footbg
#foot_bg{
    .h{
        ul{
            width: 182px;
            height: 243px;
            position: absolute;
            right: 0px;
            top:-20px;
            padding-left: 40px;
            li{margin-bottom: 2px;}
        }
        position: relative;
    }
    height: 223px;
    background: url(../images/bg51.jpg) no-repeat 0px 0;
    background-size: 100%;
}
//口号
#slogan{
    ul{
        height: 90px;
        width: 100%;
        
        li{
           height: 90px;
           float: left;
           line-height: 90px;
            font-size: 16px;
            position: relative;
            width: 300px;
            span{
                position: absolute;
                top:5px;
                left: 70px;
            }
            
            i{
                width: 44px;
                height: 44px;
                display: inline-block;
                position: absolute;
                top:25px;
                left: 10px;
            }
            .i1{background:url(../images/icon14.png)no-repeat 0px 0px;}
            .i2{background:url(../images/icon14.png)no-repeat -54px 0px;}
            .i3{background:url(../images/icon14.png)no-repeat -108px 0px;}
            .i4{background:url(../images/icon14.png)no-repeat -162px 0px;}
            
        }
    }
    height: 90px;
    padding: 23px 0 22px;
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
}
#service{
    height: 180px;
    padding: 20px 0 30px;
    .s_box{
        float: left;
        width: 240px;
        height: 180px;
        span{font-size: 16px;padding-bottom: 15px;}
        ul{margin-top: 20px;li{line-height: 24px;a{color: #333;}}}
        }
}
#footer{
    height: 243px;
    padding: 29px 0 30px;
    .link{
        a{padding-left: 5px;color: #666;&:hover{color: #d5434a;}}
    }
    .Copyright{
        text-align: center;
        margin-top:20px;
        color: #666;
        a{color: #666;}
    }
    .img{
        text-align: center;
        margin-top: 25px;
    }
}
.bg{width: 62px;height: 58px;background: url(../images/1382542488099.png) no-repeat;position: absolute;left: 0;top: 0;}
.bg1{width: 62px;height: 58px;background: url(../images/1446367721620.png) no-repeat;position: absolute;left: 0;top: 0;}
.bg2{width: 62px;height: 58px;background: url(../images/1446367740730.png) no-repeat;position: absolute;left: 0;top: 0;}
.col1{background: #e2f9fb;}
.col2{background: #fee9e6;}
.col3{background:#fcefff;}
.col4{background: #fffce7;}
.col5{background: #f6f6f6;}
.col6{background: #e2f9fb;}
.withe{background: #fff;}
//------------------------index结束-------------------
.list_nav{
 z-index: 2;
   .list_middle{display: none;}
// &:hover .midlle{display: block;}
}
#list_content{


//list_t
.list_t{
    
    a{color: #333;}
   color: #333;
}
//筛选
.filter{
//  z-index: 99;
    position: relative;
    height: auto;
    line-height: 50px;
     a{padding-left: 10px;color: #999;}
     span{color: #333;}
    border: 1px solid #dedede;
    .classify{height: 50px; width: 100%;padding-left: 50px;
           
    }
    .sort{height: 50px;width: 100%;padding-left: 50px;a{padding-left: 10px;}}
}
//产品
.product{
    overflow: hidden;
    ul{
        li{
            width: 222px;
            height: 380px;
            border: 1px solid #dedede;
            float: left;
            img{width: 218px;height: 218px;padding: 12px 0 11px;}
            .l_name{display: inline-block;width: 195px;height: 50px;margin-left: 15px;line-height: 18px;color: #666;span{color: #cd0000;}&:hover{color: #e01d20;text-decoration: underline;}}
            .l_price{display: inline-block;width: 224px;height: 32;font-size: 20px; color: #e01d20;text-align: center;padding-bottom: 10px;margin-top: 10px;border-bottom: 1px solid #DEDEDE;}
            .l_car{display: block;width: 110px;height: 32px;text-align: center;line-height: 32px;border-right: 1px solid #DEDEDE;color: #e01d20;&:hover{background: #e01d20;color: #fff;}}
            .l_evaluate{display: block;width: 110px;height: 32px;text-align: center;line-height: 32px;}
        }
    }
}
}
//-----------------------------列表页结束--------------------------
.main{
    overflow: hidden;
    z-index: 1;
    position: relative;
    .main_top{
        a{color: #666;&:hover{color: #333;text-decoration: underline;}}
        span{color: #333;}
    }
    .main_up{
        border:1px solid #DFDFDF;
        width: 1198px;
        height: 635px;
        .mp_left{
            width: 481px;
//          padding: 15px 30px;
            height: 637px;
            border-right: 1px solid #DFDFDF;
            .zoom-small-image{width: 480px;height: 480px;text-align: center;}
//          .img1{width: 480px;height: 480px;}
//          ul{
//              
//              height: 70px;
//              li{float: left;height: 67px;width: 67px;margin-left:20px;border:3px solid #fff;text-align: center;img{height: 66px;width: 66px;border: 1px solid #DEDEDE;}&:hover{border: 3px solid #eb8d91;}}
//            }
        }
//      mp_left
        .mp_right{
            width: 656px;
            height: 635px;
            position: relative;
            .p_name{
                height: 87px;
                padding-left: 30px;
                padding-top: 36px;
                h1{
                    font-size: 20px;
                    color: #333;
                    font-weight: normal;
                    line-height: 24px;
                }
                span{
                    display: block;
                    font-size: 16px;
                    color: #e01d20;
                    line-height: 20px;
                    padding-top: 6px;
                    padding-bottom: 6px;
                }
                
            }
            .p_price{
                padding-left: 30px;
                height: 122px;
                padding-top: 15px;
                li{line-height: 22px;span{display: inline-block;width: 73px;height: 12px;background: url(../images/star7.png) no-repeat -76px 0;}}
                b{font-size: 24px;color: #e01d20;}
            }
            .choice{
                padding-left: 30px;
                padding-top: 30px;
                height: 168px;
                li{
                    height: 36px;
                    .c1{margin-left: 10px;padding: 5px;border: 1px solid #b2b2b2;color: #333;}
                    .c1_hover{border: 1px solid #ca141d;border-radius: 4px;}
                    .c2{width: 42px;height: 42px;img{width: 40px;height: 40px;}display: block;border: 1px solid #b2b2b2;margin-left: 15px;}
                    .c3{margin-left: 20px;}
                    .p_pack{float: left;.c1_hover{border: 1px solid #ca141d;border-radius: 4px;}}
                    .txt{border: 1px solid #B2B2B2;width: 50px;height: 25px;text-align: center;margin: 0 5px;}
                    .ft{font-size: 20px;font-weight: 700;color: #d9d9d9;}
                }
            }
            .buy{
                position: absolute;
                height: 70px;
                width: 500px;
                left: 28px;
                bottom: 30px;
                span{i{font-style: normal;color: #e01d20;}}
                a{display: block;margin-top: 10px;width: 190px;height: 40px;background: #e01d20;color:#fff;line-height: 40px;font-family: 'Tahoma',\5FAE\8F6F\96C5\9ED1;font-size: 16px;text-align:center;&:hover{background: #e64a4d;}}
            }
            
            
            
        }
//       .mp_right
    }
//  main_up
    .main_down{
        overflow: hidden;
        .md_left{
            width: 240px;
            height: 540px;
            border: 1px solid #dedede;
            h3{
                line-height: 47px;
                text-indent: 14px;
                font-size: 14px;
                font-family: 'Tahoma',\5FAE\8F6F\96C5\9ED1;
                color: #333;
                font-weight: 400;
            }
            .l1{
                width: 240px;
                height: 82px;
                position: relative;
                .img1{position:absolute;top:10px;left:12px;}
                .name{position:absolute;top:20px;left:70px;color: #666;&:hover{text-decoration: underline;}}
                .price{position:absolute;top:40px;left:70px;color: #e01d20;}
                s{position:absolute;display: block;width: 23px;height: 23px;background: url(../images/sprites1.png)no-repeat;}
                .s1{background-position: 0 0;}
                .s2{background-position: -33px 0;}
                .s3{background-position: -66px 0;}
                .s4{background-position: -99px 0;}
                .s5{background-position: -132px 0;}
                .s6{background-position: -165px 0;}
            }
        }
        .md_right{
            width: 940px;
           overflow: hidden;
            border: 1px solid #dedede;
            
            .img2{text-align: center;}
            
            ul{
                width: 100%;
                height: 50px;
                background: #f7f7f7;
                .active{border-bottom: none;}
                li{background: #fff;cursor: pointer;float: left;line-height: 50px;font-size: 14px;padding: 0 30px;border-right: 1px solid #DEDEDE;border-bottom: 1px solid #DEDEDE;}
            }
            
        }
     }
}
//放大镜
.preview{width:400px; height:465px;margin: 50px;}
/* smallImg */
.smallImg{position:relative; height:52px; margin-top:50px;  padding:6px 5px; width:390px; overflow:hidden;float:left;}
.scrollbutton{width:14px; height:50px; overflow:hidden; position:relative; float:left; cursor:pointer; }
.scrollbutton.smallImgUp , .scrollbutton.smallImgUp.disabled{background:url(Public/Home/images/d_08.png) no-repeat;}
.scrollbutton.smallImgDown , .scrollbutton.smallImgDown.disabled{background:url(Public/Home/images/d_09.png) no-repeat; margin-left:375px; margin-top:-50px;}

#imageMenu {height:50px; width:360px; overflow:hidden; margin-left:0; float:left;}
#imageMenu li {height:50px; width:60px; overflow:hidden; float:left; text-align:center;}
#imageMenu li img{width:50px; height:50px;cursor:pointer;}
#imageMenu li#onlickImg img, #imageMenu li:hover img{ width:44px; height:44px; border:3px solid #959595;}
/* bigImg */
.bigImg{position:relative; float:left; width:400px; height:400px; overflow:hidden;}
.bigImg #midimg{width:400px; height:400px;}
.bigImg #winSelector{width:235px; height:210px;}
#winSelector{position:absolute; cursor:crosshair; filter:alpha(opacity=15); -moz-opacity:0.15; opacity:0.15; background-color:#000; border:1px solid #fff;}
/* bigView */
#bigView{position:absolute;border: 1px solid #959595; overflow: hidden; z-index:999;}
#bigView img{position:absolute;}
//---------------内容页结束----------------------
//------------------购物车----------------------

.success_car{
    width: 430px;
    height: 195px;
    background: #f2f2f2;
    border: 1px solid #ccc;
    position: absolute;
    top: 105%;left: 43%;
    z-index: 4;
//  position: relative;
    .close{position: absolute;right: 3px;top: 2px;font-size: 16px;color: #666666;}
    .msg{font-size: 18px;color: #6bd318;margin-bottom: 10px;}
    .total,p{line-height: 24px;}
    s{width: 72px;height: 72px;margin-left:45px;margin-top:45px;display: block;}
    .right{margin: 30px 0;padding-right: 20px;}
    .button{margin-top: 10px;}
    .btn1{margin-right:10px;width: 120px;height: 37px;background: #e01d20;display: block;text-align: center;line-height: 37px;color: #fff;font-size: 14px;}
    .btn2{margin-right:10px;width: 120px;height: 37px;background: #EBEDEF;display: block;text-align: center;line-height: 37px;color: #000;font-size: 14px;border: 1px solid #ccc;&:hover{background: #fefefe;}}
}

